
<template>
	<view class="content">
		<view class="zaishou">
			<!-- <view class="title">历史预测</view> -->
			<view class="item" v-for="(item,index) in history" @click="navigatorTo(item)" :key="index">
				<view class="i1">
					<view class="name">{{item.league}}</view>
					<view>{{$u.timeFormat(item.gtime, 'yyyy/mm/dd/ hh:MM')}}</view>
				</view>
				<view class="i2" >
					{{item.homeName}}<text style="color: #c72d5e;margin: 0 5px;">{{item.score.split('-')[0]}}</text>VS<text style="color: #c72d5e;margin: 0 5px;" >{{item.score.split('-')[1]}}</text>
					{{item.awayName}}
				</view>
				<view class="i3">
					<view>{{item.playTypeStr}}</view>
					<view class="right">
						<view style="background-color: rgb(240, 69, 69);border-radius: 6px;padding: 2px 6px;font-size: 12px;" v-if="item.propStr">{{item.propStr}}</view>
						<view style="margin: 0 5px;">{{item.money}}</view>
						<image src="../../static/image/index/zuanshi.png" style="width: 18px;height: 18px;margin-right: 5px;"></image>
						<image :src="computresult(item.result)" style="width: 18px;height: 18px;border-radius: 50%;"></image>
					</view>
				</view>
			</view>
			<view class="uni-loadmore" v-if="load.showLoadMore">{{load.loadMoreText}}</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api','userToken']),
			computresult(){
				return (result,type)=>{
					if(result==1){
						return '../../static/image/yuce/hong.png'
					}else if(result==2){
						return '../../static/image/yuce/ping.png'
					}else if(result==-1){
						return '../../static/image/yuce/hei.png'
					}
				}
			}
		},
		data() {
			return {
				history:[],//获取历史预测
				load:{
					end:false,//是否没有数据了
					page:1,
					loadMoreText: "加载中...",
					showLoadMore: false,
				},
			}
		},
		onLoad() {
			this.expertHistoryFact();
		},
		onReachBottom() {
			if (this.load.end==true) {
				this.load.loadMoreText = "没有更多数据了!"
				return;
			}
			this.load.showLoadMore = true;
			this.load.page++
			this.expertHistoryFact();
		},
		methods:{
			navigatorTo(row){
				uni.navigateTo({
					url: '/pages/forecastDetails/forecastDetails?id='+row.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickBtn(index){
				this.active=index
			},
			//预测订单
			expertHistoryFact(){
				let params={
					page:this.load.page,
				}
				uni.$u.http.post(this.api.api_v1_user_recommendBuylog, params).then(res => {
					if(!res.data.next_page_url){
						this.load.end=true
					}
					if(res.code==200&&res.data&&res.data.data){
						this.history=this.history.concat(res.data.data)
						
					}
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.red{
		color: #f04545;
	}
	.content{
		padding: 5px 10px;box-sizing: border-box;color: #fff;font-size: 14px;
		.zaishou{
			background-color: #242448;padding: 10px 15px;margin: 10px 0;
			.title{
				font-size: 14px;width: 100%;border-bottom: 1px solid #4b4b98;line-height: 30px;
			}
			.item{
				padding: 10px 0;border-bottom: 1px solid #4b4b98;
				.i1{
					display: flex;align-items: center;
					.name{
						margin-right: 20px;max-width: 300rpx;
					}
				}
				.i2{
					font-size: 14px;line-height:20px;margin: 10px 0;
				}
				.i3{
					display: flex;justify-content: space-between;align-items: center;
					.right{
						display: flex;align-items: center;
						.num {
							font-size: 16px;color: #f9da8a;margin-right: 10px;
						}
						.image{
							width: 20px;height: 16px;
						}
						.yuan{
							width: 30px;height: 30px;text-align: center;line-height: 30px;border-radius: 50%;
						}
					}
					
				}
			}
		}
		.uni-loadmore{
			text-align: center;margin: 10px;
		}
	}
</style>
